<template>
  <div class="wrap">
    <div class="header">
      <img src="../assets/king.png" class="hg" alt />
      <h3 class="history" @click="history">历史续费</h3>
      <p class="title">账号到期：{{userInfo.end_time}}</p>
    </div>
    <div class="conter">
      <p class="tit">会员价格</p>
      <div class="cardBox">
        <div :class="index==2?'card act':'card' " @click="select(2)">
          <div class="left">
            <span>捷报一年会员</span>
            <p>798.00元</p>
          </div>
          <div class="right">
            <p>选择</p>
            <img src alt />
          </div>
        </div>
        <div :class="index==1?'card act':'card' " @click="select(1)">
          <div class="left">
            <span>捷报半年会员</span>
            <p>498.00元</p>
          </div>
          <div class="right">
            <p>选择</p>
            <img src alt />
          </div>
        </div>
      </div>
      <p class="price">实际支付：￥{{index==1?'498':'798'}}元</p>
      <p class="btn" @click="payIn">支付</p>
    </div>
    <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <van-loading color="#1989fa" >支付结果查询中...</van-loading>
      </div>
    </van-overlay>
  </div>
</template>
<style scoped lang="scss">
.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80vh;
}
.header {
  background: #36394a;
  height: 5.333333rem;
  overflow: hidden;
  position: relative;
  //   z-index: -1;
  .hg {
    width: 1.04rem;
    height: 0.733333rem;
    display: block;
    margin: 2rem auto 0;
  }
  .title {
    color: #fcf0e2;
    font-size: 0.666667rem;
    text-align: center;
    margin-top: 0.373333rem;
  }
  .history {
    color: #fcf0e2;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
  }
}
.conter {
  width: 9.2rem;
  height: 11.333333rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 3px 4px 21px rgba(4, 0, 0, 0.28);
  border-radius: 8px;
  margin: -1rem 0 0 0.4rem;
  overflow: hidden;
  z-index: 1;
  position: absolute;
  .tit {
    color: #313131;
    font-size: 0.4rem;
    border-left: 4px solid #f8d697;
    text-align: left;
    padding-left: 0.4rem;
    margin: 0.72rem auto 0;
    width: 7.7rem;
  }
  .cardBox {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e5e5e5;
    width: 8.1rem;
    margin: 0 auto;
    .card {
      width: 8.1rem;
      height: 2.2rem;
      background: #c8cbd4;
      border-radius: 0.2rem;
      margin: 0.4rem auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        widows: 4.16rem;
        margin-left: 0.48rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        span {
          color: #fff;
          font-size: 0.346667rem;
        }
        p {
          color: #fff;
          font-size: 0.746667rem;
        }
      }
      .right {
        margin-right: 0.4rem;
        display: flex;
        p {
          color: #fff;
          font-size: 0.48rem;
          padding: 4px 15px;
          border: 1px solid rgba(255, 255, 255, 1);
          border-radius: 20px;
          line-height: 1;
          margin-right: 0.4rem;
        }
        img {
          display: block;
          width: 0.346667rem;
          height: 0.346667rem;
          background: #fff;
          border-radius: 50%;
          margin-top: -0.2rem;
        }
      }
    }
    .act {
      background: #f8d697;
    }
  }
  .price {
    color: #999;
    font-size: 0.426667rem;
    text-align: right;
    width: 8.1rem;
    margin: 0.4rem auto 0;
  }
  .btn {
    height: 1.333333rem;
    width: 8.293333rem;
    margin: 0.6rem auto 0;
    border-radius: 20px;
    background: #f8d697;
    color: #fff;
    font-size: 0.533333rem;
    line-height: 1.333333rem;
  }
}
</style>
<script>
import {
  unifiedorder,
  findPayOrder,
  getConfig,
  findUserInfo
} from "@/utils/interface";
import { Dialog, Toast, Loading, Overlay } from "vant";

export default {
  components: {
    Loading,
    Overlay
  },
  data() {
    return {
      index: 2,
      userInfo: {},
      serInterValTime: null,
      show:false
    };
  },
  methods: {
    history() {
      this.$router.push("/history");
    },
    select(n) {
      this.index = n;
    },
    payIn() {
      let str = this.index == 2 ? "一年会员" : "半年会员";
      let price = this.index == 2 ? 79800 : 49800;
      let openid = localStorage.getItem("openId");
      let that = this;
      this.getConfig(function(res) {
        unifiedorder({
          trade_type: "JSAPI",
          total_fee: price,
          body: str,
          product_type: that.index,
          openid: openid
        }).then(res => {
          that.orderId = res.data.data.out_trade_no;
          
          wx.chooseWXPay({
            timestamp: res.data.data.timeStamp,
            nonceStr: res.data.data.nonceStr,
            package: res.data.data.package,
            signType: res.data.data.signType,
            paySign: res.data.data.paySign,
            success: function(res) {
              that.show = true
              that.serInterValTime = setInterval(() => {
                findPayOrder({ out_trade_no: that.orderId }).then(res => {
                  if ((res.data.data.trade_state = "SUCCESS")) {
                     that.show =false
                    clearInterval(that.serInterValTime);
                    Dialog.confirm({
                      title: "提示",
                      message: "支付成功"
                    }).then(() => {
                      that.$router.replace("/person");
                    });
                  }
                });
              }, 1000);
            },
            cancel: function(res) {
              Toast.fail("支付取消");
              that.show =false
            },
            error: function(res) {
               that.show =false
              Dialog.confirm({
                title: "提示",
                message: "支付失败"
              }).then(() => {
                that.$router.replace("/person");
              });
            }
          });
        });
      });
    },
    getConfig(callback) {
      let _this = this;
      getConfig({
        url: location.href.split("#")[0]
      })
        .then(
          function(res) {
            if (res.data.code == 200) {
              let appId = res.data.data.appId;
              let nonceStr = res.data.data.nonceStr;
              let signature = res.data.data.signature;
              let timestamp = res.data.data.timestamp;
              wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr, // 必填，生成签名的随机串
                signature: signature, // 必填，签名，见附录1
                jsApiList: [
                  "checkJsApi",
                  "onMenuShareTimeline",
                  "onMenuShareAppMessage",
                  "onMenuShareQQ",
                  "onMenuShareWeibo",
                  "hideMenuItems",
                  "showMenuItems",
                  "hideAllNonBaseMenuItem",
                  "showAllNonBaseMenuItem",
                  "translateVoice",
                  "startRecord",
                  "stopRecord",
                  "onRecordEnd",
                  "playVoice",
                  "pauseVoice",
                  "stopVoice",
                  "uploadVoice",
                  "downloadVoice",
                  "chooseImage",
                  "previewImage",
                  "uploadImage",
                  "downloadImage",
                  "getNetworkType",
                  "openLocation",
                  "getLocation",
                  "hideOptionMenu",
                  "showOptionMenu",
                  "closeWindow",
                  "scanQRCode",
                  "chooseWXPay",
                  "openProductSpecificView",
                  "addCard",
                  "chooseCard",
                  "openCard",
                  "openWXDeviceLib",
                  "closeWXDeviceLib",
                  "configWXDeviceWiFi",
                  "getWXDeviceInfos",
                  "sendDataToWXDevice",
                  "startScanWXDevice",
                  "stopScanWXDevice",
                  "connectWXDevice",
                  "disconnectWXDevice",
                  "getWXDeviceTicket",
                  "WeixinJSBridgeReady",
                  "onWXDeviceBindStateChange",
                  "onWXDeviceStateChange",
                  "onScanWXDeviceResult",
                  "onReceiveDataFromWXDevice",
                  "onWXDeviceBluetoothStateChange"
                ]
              });
              wx.ready(function() {
                if (callback) callback(res);
              });
              wx.error(function(res) {
                console.log("配置失败", res);
              });
            }
          }.bind(this)
        )
        .catch(function(err) {});
    },
    // 获取用户信息
    findUserInfo() {
      findUserInfo().then(res => {
        this.userInfo = res.data.data;
      });
    }
  },
  deforeDestroy() {
    console.log("关闭");
  },
  created() {
    this.findUserInfo();
  }
};
</script>